<template>
  <!-- $t is vue-i18n global function to translate lang -->
  <div class="app-container w-full lg:w-2/3">
    <md-shower :id="articleId"></md-shower>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MdShower from "@/components/MdShower/index.vue";

export default {
  name: "Article",
  components: {
    MdShower,
  },
  computed: {
    ...mapGetters(["articles"]),
    articleId() {
      return this.$route.params.id;
    },
  },
  asyncData({ store, route }) {
    return store.dispatch("fetchShowArticle", {
      access_token: store.getters.accessToken,
      repo_name: store.getters.repoName,
      id: route.params.id,
    });
  },
};
</script>

<style lang="scss" scoped>
.el-select >>> .el-input {
  width: 130px;
}
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}
</style>